<template>
	<div>
		<el-input disabled :value="$route.query.roleName"></el-input>
		<el-tree
			:data="allPermissions"
			show-checkbox
			ref="tree"
			node-key="id"
			default-expand-all
			:props="defaultProps">
	</el-tree>
	<el-button type="primary" @click="save">保存</el-button>
  <el-button  @click="$router.replace({ name: 'Role' })">取消</el-button>
	</div>
</template>

<script>
import PermissionApi from "@/api/acl/permission";
export default {
	data() {
    return {
      allPermissions: [], // 所有
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
	methods: {
    // 初始化
    init() {
      const roleId = this.$route.params.id;
      this.getPermissions(roleId);
    },
    //获取指定角色的权限菜单
    getPermissions(roleId) {
      PermissionApi.toAssign(roleId).then((result) => {
        const allPermissions = result.data.children;
        this.allPermissions = allPermissions;
        const checkedIds = this.getCheckedIds(allPermissions);
        // console.log('getPermissions() checkedIds', checkedIds)
        this.$refs.tree.setCheckedKeys(checkedIds);
      });
    },
    //得到所有选中的id列表
    getCheckedIds(auths, initArr = []) {
      return auths.reduce((pre, item) => {
        if (item.select) {
          pre.push(item.id);
        } else if (item.children) {
          this.getCheckedIds(item.children, initArr);
        }
        return pre;
      }, initArr);
    },

    //保存权限列表
    save() {
      const ids = this.$refs.tree.getCheckedKeys().join(",");
      /*
        vue elementUI tree树形控件获取父节点ID的实例
        node_modules\element-ui\lib\tree.js    1051行修改源码  去掉 'includeHalfChecked &&'
        // if ((child.checked || includeHalfChecked && child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
        if ((child.checked || child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
        */
      this.loading = true;
      PermissionApi.doAssign(this.$route.params.id, ids).then((result) => {
        this.loading = false;
        this.$message.success(result.$message || "分配权限成功");
        // 必须在跳转前获取(跳转后通过this获取不到正确的数据了)
        const roleName = this.$route.query.roleName;
        const roles = this.$store.getters.roles;
        this.$router.replace("/aci/role", () => {
          console.log("replace onComplete");
          // 跳转成功后, 判断如果更新的是当前用户对应角色的权限, 重新加载页面以获得最新的数据
          if (roles.includes(roleName)) {
            // window.location.reload()
          }
        });
      });
    },
  },
  mounted() {
    this.init();
  },
}
</script>

<style scoped>

</style>